<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Calendar</title>

        <style type="text/css">
            .value {
                width: 1000px;
            }
            .panel1 tr, .panel1 td {
                border: none !important;
                text-align: right;
                background: none !important;
            }
            .fieldset1 tr, .fieldset1 td {
                border: none !important;
                text-align: left;
                background: none !important; 

            }
        </style>
    </h:head>
    <h:body>
        <h:form>
            <p:growl id="messages" showDetail="true"/>
            <p:panelGrid columns="1" style="width: 100%" styleClass="panel1">
                <p:menuButton value="#{calendarGUI.nameSurname}" >
                    <p:menuitem value="Logout" action="#{loginGUI.logout()}" icon="ui-icon-extlink" immediate="true" ajax="false"/>
                </p:menuButton>
                <p:fieldset styleClass="fieldset1" legend="Notify" toggleable="true" toggleSpeed="500" collapsed="#{calendarGUI.isNotifylinkEmpity() and calendarGUI.isNotifyReplyEmpity()}">
                    <h:panelGrid columns="1" style="margin: 0 auto">
                        <h:graphicImage value="images/all-work-and-no-play.jpg" style="width: 50%" rendered="#{calendarGUI.isJack()}"/>
                        <h:graphicImage value="images/jack.jpg" style="width: 50%" rendered="#{calendarGUI.isJack()}"/>
                        <p:dataScroller id="scroll1" value="#{calendarGUI.notifyLink}" var="notify1" rendered="#{not calendarGUI.isNotifylinkEmpity()}">

                            <f:facet name="header">
                                Scroll Down to Load More Notify
                            </f:facet>

                            <h:panelGrid columns="2" style="width:100%">
                                <h:outputText value="Message: "/>
                                <h:outputText value="#{notify1.message}"/>
                                <p:commandButton value="ok" action="#{calendarGUI.okDeleteNotify(notify1,false)}" rendered="#{not notify1.hasSuggestedDate()}" update="scroll1" ajax="false"/>
                                <p:commandButton value="yes" action="#{calendarGUI.okDeleteNotify(notify1,true)}" rendered="#{notify1.hasSuggestedDate()}" update="scroll1" ajax="false"/>
                                <p:commandButton value="no" action="#{calendarGUI.okDeleteNotify(notify1,false)}" rendered="#{notify1.hasSuggestedDate()}" update="scroll1" ajax="false"/>

                            </h:panelGrid>

                        </p:dataScroller>
                        <p:dataScroller id="scroll2" value="#{calendarGUI.notifyReply}" var="notify2" rendered="#{not calendarGUI.isNotifyReplyEmpity()}">

                            <f:facet name="header">
                                Scroll Down to Load More Notify
                            </f:facet>

                            <h:panelGrid columns="2" style="width:100%">
                                <h:outputText value="Message: "/>
                                <h:outputText value="#{notify2.message}"/>
                                <p:commandButton value="accept" action="#{calendarGUI.acceptDeclineInvite(true, notify2)}" update="scroll2" ajax="false"/>
                                <p:commandButton value="decline" action="#{calendarGUI.acceptDeclineInvite(false, notify2) }" update="scroll2" ajax="false"/>

                            </h:panelGrid>

                        </p:dataScroller>

                    </h:panelGrid>
                </p:fieldset>
            </p:panelGrid>

            <h:panelGrid columnClasses="value" style="margin: 0 auto;">

                <h3 style="margin-top: 0">Calendar</h3>
                <p:schedule id="schedule" value="#{calendarGUI.eventModel}" widgetVar="myschedule" timeZone="GMT+1" timeFormat="H:mm" axisFormat="H:mm">

                    <p:ajax event="dateSelect" listener="#{calendarGUI.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                    <p:ajax event="eventSelect" listener="#{calendarGUI.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                    <p:ajax event="eventMove" listener="#{calendarGUI.onEventMove}" update="messages" />
                    <p:ajax event="eventResize" listener="#{calendarGUI.onEventResize}" update="messages" />

                </p:schedule>
            </h:panelGrid>
            <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
                <h:panelGrid id="eventDetails" columns="2">
                    <h:outputLabel for="owner" value="Owner: " rendered="#{not calendarGUI.event.editable}"/>
                    <p:outputLabel id="owner" value="#{calendarGUI.event.owner}" rendered="#{not calendarGUI.event.editable}" />


                    <h:outputLabel for="title" value="Title:" />
                    <p:inputText id="title" value="#{calendarGUI.event.title}" rendered="#{calendarGUI.event.editable}" required="true" />
                    <p:outputLabel id="title1" value="#{calendarGUI.event.title}" rendered="#{not calendarGUI.event.editable}" />

                    <h:outputLabel for="description" value="Description:" rendered="#{calendarGUI.event.showDetail}"/>
                    <p:inputText id="description" value="#{calendarGUI.event.description}" rendered="#{calendarGUI.event.editable}" required="true" />
                    <p:outputLabel id="description1" value="#{calendarGUI.event.description}" rendered="#{not calendarGUI.event.editable and calendarGUI.event.showDetail}"/>

                    <h:outputLabel for="from" value="From:" />
                    <p:calendar id="from" disabled="#{calendarGUI.event.allDay}" value="#{calendarGUI.event.startDate}" rendered="#{calendarGUI.event.editable}" required="true" pattern="dd-MM-yyyy H:mm">
                        <p:ajax event="change" update="eventDetails" listener="#{calendarGUI.validateEventDate()}"/>
                        <p:ajax event="dateSelect" update="eventDetails" listener="#{calendarGUI.validateEventDate()}"/>
                    </p:calendar>
                    <p:outputLabel id="from1" value="#{calendarGUI.event.startDate}" rendered="#{not calendarGUI.event.editable}"/>

                    <h:outputLabel for="to" value="To:" />
                    <p:calendar id="to" disabled="#{calendarGUI.event.allDay}" value="#{calendarGUI.event.endDate}" rendered="#{calendarGUI.event.editable}" required="true" pattern="dd-MM-yyyy H:mm" mindate="#{calendarGUI.event.endDate}">
                        <p:ajax event="change" update="eventDetails" listener="#{calendarGUI.validateEventDate()}"/>
                        <p:ajax event="dateSelect" update="eventDetails" listener="#{calendarGUI.validateEventDate()}"/>
                    </p:calendar>
                    <p:outputLabel id="to1" value="#{calendarGUI.event.endDate}" rendered="#{not calendarGUI.event.editable}"/>


                    <h:outputLabel for="allDay" value="All Day:" rendered="#{calendarGUI.event.showDetail}"/>
                    <h:selectBooleanCheckbox id="allDay" disabled="#{not calendarGUI.event.editable}" value="#{calendarGUI.event.allDay}" rendered="#{calendarGUI.event.showDetail}" >
                    <p:ajax event="change" update="eventDetails"/>
                    </h:selectBooleanCheckbox>

                    <h:outputLabel for="location" value="Location:" rendered="#{calendarGUI.event.showDetail}"/>
                    <p:inputText id="location" value="#{calendarGUI.event.location}" rendered="#{calendarGUI.event.editable}" required="true" />
                    <p:outputLabel id="location1" value="#{calendarGUI.event.location}" rendered="#{not calendarGUI.event.editable and calendarGUI.event.showDetail}" />

                    <h:outputLabel for="invitedUser" value="Invited User:" rendered="#{calendarGUI.event.editable}"/>
                    <p:autoComplete id="invitedUser" value="#{calendarGUI.event.guest}" converter="RegisteredUserConverter"
                                    rendered="#{calendarGUI.event.editable}" completeMethod="#{calendarGUI.getCompleteTxt}" 
                                    var="u" multiple="true" itemLabel="#{u.name} #{u.surname} (#{u.email})" itemValue="#{u}"
                                    forceSelection="true">
                        <p:ajax event="itemSelect" />
                        <p:ajax event="itemUnselect" />
                    </p:autoComplete>

                    <h:outputLabel for="invitedUser" value="Invited User:" rendered="#{not calendarGUI.event.editable and calendarGUI.event.showDetail}"/>
                    <p:dataList emptyMessage="No invited user." var="list" value="#{calendarGUI.event.guest}" rendered="#{not calendarGUI.event.editable and calendarGUI.event.showDetail}">
                        #{list.name} #{list.surname} (#{list.email})
                    </p:dataList>

                    <p:graphicImage id="weather" value="#{calendarGUI.event.iconW}" rendered="#{calendarGUI.event.showDetail and calendarGUI.event.hasWeather}"/>
                    <h:outputText id="weather2" value="#{calendarGUI.event.descriptionW}" rendered="#{calendarGUI.event.showDetail and calendarGUI.event.hasWeather}"/>
                    <h:outputLabel for="temperature" value="Temperature: " rendered="#{calendarGUI.event.showDetail and calendarGUI.event.hasWeather}"/>
                    <h:outputText id="temperature" value="#{calendarGUI.event.temperatureW}°" rendered="#{calendarGUI.event.showDetail and calendarGUI.event.hasWeather}"/>

                    <p:outputLabel for="public" value="Visibility:"  rendered="#{calendarGUI.event.showDetail}"/>
                    <p:selectOneRadio id="public" value="#{calendarGUI.event.public_bool}" disabled="#{not calendarGUI.event.editable}" rendered="#{calendarGUI.event.showDetail}">
                        <f:selectItem itemLabel="Private" itemValue="false"/>
                        <f:selectItem itemLabel="Public" itemValue="true"/>
                    </p:selectOneRadio>

                    <p:outputLabel for="indoor" value="Type:" rendered="#{calendarGUI.event.showDetail}"/>
                    <p:selectOneRadio id="indoor" value="#{calendarGUI.event.indoor_bool}" disabled="#{not calendarGUI.event.editable}" rendered="#{calendarGUI.event.showDetail}">
                        <f:selectItem itemLabel="Indoor" itemValue="true"/>
                        <f:selectItem itemLabel="Outdoor" itemValue="false"/>
                    </p:selectOneRadio>

                    <p:commandButton type="reset" value="Reset" rendered="#{calendarGUI.event.editable}"/>
                    <p:commandButton id="addButton" value="Save" actionListener="#{calendarGUI.addEvent}" rendered="#{calendarGUI.event.editable}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" update="messages" />
                    <p:commandButton id="deleteButton" value="Delete" actionListener="#{calendarGUI.deleteEvent}" rendered="#{calendarGUI.event.editable and calendarGUI.event.hasId()}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" update="messages"/>
                </h:panelGrid>

            </p:dialog>   
        </h:form>

    </h:body>
</html>

